<template>
  <div class="app-container">
    <div style="width: 60vw">
      <!-- 提示：需要微信支付商户开通
          <span style="color: #f00">【企业打款到零钱】</span
          >产品功能提现打款成本，具体详情请登录微信支付官方后台=》产品中心查看 -->
      <h3 v-html="tip"></h3>
      <el-form :model="baseInfo" ref="baseInfo" :rules="rules">
        <el-form-item :label-width="labelWidth" label="商户号" prop="merchant_id">
          <el-input placeholder="请输入商户号" v-model="baseInfo.merchant_id" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="商户密钥" prop="merchant_key">
          <el-input placeholder="请输入密钥" v-model="baseInfo.merchant_key" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="cert证书文件" prop="apiclient_cert">
          <ImageUpload :extraData="{ type: 'apiclient_cert' }" :limit="1" :uploadImgUrl="uploadFileUrl"
            :fileType="['pem']" v-model:value="baseInfo.apiclient_cert"
            @input="uploadSuccess($event, 'apiclient_cert')" />
          <span>pem文件格式</span>
        </el-form-item>
        <el-form-item :label-width="labelWidth" label="key证书文件" prop="apiclient_key">
          <ImageUpload :extraData="{ type: 'apiclient_key' }" :limit="1" :uploadImgUrl="uploadFileUrl"
            :fileType="['pem']" v-model:value="baseInfo.apiclient_key"
            @input="uploadSuccess($event, 'apiclient_key')" />
          <span>pem文件格式</span>
        </el-form-item>

        <el-form-item label="" style="
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 100px;
            ">
          <el-button style="margin: 0 auto" @click="submit" type="success"
            v-hasPermi="['member:mpConfig:changeMpConfig']">提交</el-button>
          <!-- v-hasPermi="['api:mpManage:changeMpConfig']" -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const baseUrl =
  import.meta.env.VITE_APP_ENV == "development"
    ? import.meta.env.VITE_APP_BASE_API
    : window.location.origin;
import ImgUpload from "@/components/ImageUpload";
import { getMpApplySet, changeMpApplySet } from "@/api/platform/mpConfig";
// import { uploadImgUrl } from "@/api/mpManage/mpUpload";

export default {
  name: "platformapplySetindex",
  components: {
    ImgUpload,
  },
  data() {
    return {
      uploadFileUrl:
        // import.meta.env.VITE_APP_ENV == "development"
        //   ? import.meta.env.VITE_APP_BASE_API + "/member/payment/uploadPayfile"
        //   : window.location.origin + "/member/payment/uploadPayfile",
        import.meta.env.VITE_APP_ENV == "development"
          ? import.meta.env.VITE_APP_BASE_API + "/api/payment/uploadPayfile"
          : window.location.origin + "/api/payment/uploadPayfile",
      richStr2: "",
      tip: "",
      richStr: "",
      // uploadImgUrl,
      baseInfo: {
        merchant_id: "",
        merchant_key: "",
        apiclient_cert: "",
        apiclient_key: "",
      },
      labelWidth: "160px",
      rules: {
        merchant_id: [{ required: true, message: "请输入", trigger: "blur" }],
        merchant_key: [{ required: true, message: "请输入", trigger: "blur" }],
        apiclient_cert: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        apiclient_key: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // baseInfoRules: {
      //   contact_url: [{ required: true, message: "请选择" }],
      //   expire_seconds: [
      //     { required: true, message: "请输入", trigger: "blur" },
      //   ],
      // },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const { data } = await getMpApplySet();
      if (data) {
        this.baseInfo = data;
        console.log(data);
        this.baseInfo.apiclient_cert = data.cert_file;
        this.baseInfo.apiclient_key = data.key_file;
        this.tip = data.tip;
        // this.baseInfo.merchant_id = data.merchant_id;
        // this.baseInfo.merchant_key = data.merchant_key;
      }
    },
    uploadSuccess(res, type) {
      //   console.log("imgsucces2222s", res);
      if (res.code == 200) {
        this.$message.success("文件上传成功,该文件不支持预览");
        if (type == "apiclient_cert") {
          this.baseInfo.apiclient_cert = res.data;
        }
        if (type == "apiclient_key") {
          this.baseInfo.apiclient_key = res.data;
        }
      }
    },
    remove(type) {
      //   this.$set(this.baseInfo, type, "");
      //   this.$set(this.baseInfo, `${type}_show`, "");
    },
    submit() {
      this.$refs.baseInfo.validate(async (valid) => {
        if (valid) {
          console.log(this.baseInfo);
          const params = { ...this.baseInfo };
          params.cert_file = params.apiclient_cert;
          params.key_file = params.apiclient_key;
          //   params.apply_text = this.richStr;
          //   params.ys_text = this.richStr2;
          //   //   baseInfo.apply_text
          await changeMpApplySet(params);
          this.$message.success("操作成功");
          this.getInfo();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 500px) {
  :deep(.el-form-item .el-form-item__label) {
    width: 80px !important;
  }
}
</style>